import styled from "@emotion/styled"
import { useAtom } from "jotai"
import { Fragment } from "react"
import { homeGamesAtom } from "@/features/business/HomePage_deprecated/atoms_deprecated"
import { FollowUs } from "../components/FollowUs"
import { Games } from "../components/Games"
import { ResponsibleGaming } from "../components/ResponsibleGaming"

const SubContainer = styled.section`
    padding-top: 10rem;
`

const order = [
    "Hot Games",
    "Slot",
    "Live",
    "Fishing",
    "Board Game",
    "Table Game",
    "Bingo",
    "New Games",
]

export const SubPageForYou = () => {
    const [{ games }] = useAtom(homeGamesAtom)
    return (
        <SubContainer>
            {Object.entries(games)
                .sort(([keyA], [keyB]) => order.indexOf(keyA) - order.indexOf(keyB))
                .map(([title, list], idx) => {
                    if (["New Games", "Bingo", "Board Game", "Table Game"].includes(title)) {
                        return null
                    }
                    return (
                        <Fragment key={`${idx}_${title}_game`}>
                            <Games
                                title={title}
                                link={
                                    ["Hot Games"].includes(title)
                                        ? `/s-game/sections/${title}`
                                        : `/s-game/category/${title}?sort=Popular`
                                }
                                games={list}
                            />
                        </Fragment>
                    )
                })}
            <FollowUs />
            <ResponsibleGaming />
        </SubContainer>
    )
}
